/* eslint-disable react-hooks/exhaustive-deps */
import React, { memo, useEffect, useState } from "react";
import { RankingLeftBox } from "./style";
import { getRankingMenuAction, getRankingConentAction } from "../../store/actionCreators";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
export default memo(function RankingLeft(param) {
    // 组件和redux关联: 获取数据和进行操作
    const [menuId, setMenuId] = useState(0);
    const { rankingMenuList } = useSelector(
        (state) => ({
            rankingMenuList: state.getIn(["ranking", "rankingMenuList"]),
        }),
        shallowEqual
    );
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getRankingMenuAction());
    }, [dispatch]);

    useEffect(() => {
        if (rankingMenuList.length !== 0) {
            console.log(rankingMenuList[0], "?");
            handNavRight(rankingMenuList[0]);
            param.setRightName(rankingMenuList[0].updateFrequency);
        }
    }, [dispatch, rankingMenuList]);
    const handNavRight = (item) => {
        setMenuId(item.id);
        dispatch(getRankingConentAction(item.id));
        param.setRightName(item.updateFrequency);
    };
    return (
        <RankingLeftBox>
            {rankingMenuList.map((item) => {
                return (
                    <div
                        key={item.id}
                        // left_menu_list active
                        className={menuId === item.id ? "left_menu_list active" : "left_menu_list"}
                        onClick={(e) => {
                            handNavRight(item);
                        }}
                    >
                        <img className="cover_img" src={item.coverImgUrl} alt="" />
                        <div className="title_box">
                            <span>{item.name}</span>
                            <span className="updata_text">{item.updateFrequency}</span>
                        </div>
                    </div>
                );
            })}
            <div></div>
        </RankingLeftBox>
    );
});
